<!--
 * @Author: taoke
 * @Date: 2022-05-05 10:08:52
 * @LastEditors: taoke
 * @LastEditTime: 2022-05-19 14:51:08
 * @Description:
 * @FilePath: \yunying-sys-cli4\src\components\partner\order\index.vue
-->
<template>
  <div>
    <h1 class="con-right-title">
      合伙人订单列表
    </h1>
    <!--上部搜索条件组件-->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <div class="table-conBtn">
      <el-button type="warning" icon="el-icon-upload2" @click="importBtn">
        导入
      </el-button>
      <el-button type="warning" icon="el-icon-download" @click="exportFile">
        导出
      </el-button>
      <el-button type="warning" icon="el-icon-download" @click="importJDcard">
        批量导入京东E卡
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column label="序号" type="index" width="80" align="center">
      </el-table-column>
      <el-table-column
        label="商品名称"
        prop="prizeName"
        min-width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="发放状态"
        prop="status"
        min-width="100"
        align="center"
        :formatter="statusFormatter"
      >
      </el-table-column>
      <el-table-column
        label="订单状态"
        prop="status"
        min-width="100"
        align="center"
        :formatter="expressFormatter"
      >
      </el-table-column>
      <el-table-column
        label="订单时间"
        prop="createTime"
        min-width="90"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="用户名"
        prop="createUserName"
        min-width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="大鹏号"
        prop="dpAccount"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="收货人"
        prop="consignee"
        min-width="80"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="收货人手机号"
        prop="consigneeMobile"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="商品类型"
        prop="prizeType"
        min-width="100"
        align="center"
        :formatter="prizeTypeFormatter"
      >
      </el-table-column>
      <el-table-column
        label="兑换金额"
        prop="amount"
        min-width="80"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="数量"
        prop="quantity"
        min-width="80"
        align="center"
        :formatter="quantityFormatter"
      >
      </el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="isExpressOperateShow(scope.row)"
            @click="deliverGoods(scope.row)"
            type="text"
            size="small"
            >发货</el-button
          >
          <el-button
            v-if="isStatusOperateShow(scope.row)"
            @click="deliverGoods(scope.row)"
            type="text"
            size="small"
            >发放</el-button
          >
          <el-button
            v-if="isShowToView(scope.row)"
            @click="toView(scope.row)"
            type="text"
            size="small"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 导入弹窗 -->
    <importDialog
      v-if="importDialogData.isShow"
      :dialog-data="importDialogData"
      @refresh="searchList"
      @showError="showError"
      @uploadSuccess="uploadSuccess"
    ></importDialog>
    <!-- 导入失败弹窗 -->
    <errorDialog
      v-if="errorDialogData.isShow"
      :dialog-data="errorDialogData"
      from="partnerOrder"
    ></errorDialog>
    <deliverGoodsDialog
      ref="deliverGoodsDialog"
      @confirm="deliverGoodsConfirm"
    ></deliverGoodsDialog>
    <!-- 设置卡号密码 -->
    <setupPasswordDialog
      v-if="setupPasswordDialogData.isShow"
      :dialog-data="setupPasswordDialogData"
      @refresh="searchList"
    ></setupPasswordDialog>
    <!-- 导入成功的弹窗 -->
    <importSuccessDialog
      v-if="importSuccessDialogData.isShow"
      :dialog-data="importSuccessDialogData"
    ></importSuccessDialog>
  </div>
</template>

<script>
import {
  getOrders,
  patchOrdersById,
  exportOrders,
  importOrders,
  importJDcards,
  importJDcardsTemplate,
  downloadFailData
} from '@/api/partner/order'
import topSearch from './topSearch'
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { formatterValueByDict, formatterValueByOptions } from '@utils/table'
import {
  expressOptions,
  statusOptions
} from '@/components/partner/types/selectOptions'
import importDialog from '@common/importDialog' // 导入弹窗
import errorDialog from '@common/errorDialog' // 导入失败弹窗
import { tablePaginationMixin } from '@/mixins/tablePaginationMixin'
import deliverGoodsDialog from './deliverGoodsDialog'
import setupPasswordDialog from './setupPasswordDialog'
import importSuccessDialog from './importSuccessDialog'
export default {
  name: 'partner-order',
  mixins: [tablePaginationMixin],
  components: {
    topSearch,
    importDialog,
    errorDialog,
    deliverGoodsDialog,
    setupPasswordDialog,
    importSuccessDialog
  },
  data() {
    return {
      prizeTypeOptions: [],
      loading: true,
      tableData: [],
      formInline: {
        consigneeMobile: undefined, //手机号
        dpAccount: undefined, // 大鹏号
        expressNumber: undefined, // 快递号
        orderTime: [],
        startTime: undefined, // 开始日期
        endTime: undefined, // 结束日期
        prizeName: undefined, // 商品名称
        prizeType: '', // 商品类型
        status: '' // 发放状态
      },
      // 传递给导入弹框的数据
      importDialogData: {
        type: 'partnerOrder',
        title: '合伙人订单列表导入',
        isShow: false, // 控制弹框显示
        params: '' // 参数
      },
      // 导入失败弹框的数据
      errorDialogData: {
        isShow: false, // 控制弹框显示
        warningText: '' // 参数
      },
      setupPasswordDialogData: {
        isShow: false
      },
      importSuccessDialogData: {
        isShow: false
      }
    }
  },
  created() {
    this.getDict()
  },
  mounted() {
    this.searchList()
  },
  methods: {
    async getDict() {
      // 获取奖品类型
      this.prizeTypeOptions = await sysNormalDisable('partner_order_prize_type')
    },
    isStatusOperateShow(row) {
      return (
        row.prizeType === 'FICTITIOUS' && row.status !== statusOptions[1].value
      )
    },
    isExpressOperateShow(row) {
      return (
        row.prizeType === 'MATERIAL_OBJECT' &&
        row.status !== expressOptions[1].value
      )
    },
    statusFormatter(row, _column, cellValue) {
      return formatterValueByOptions({
        cellValue,
        condition: cellValue && row.prizeType === 'FICTITIOUS',
        options: statusOptions
      })
    },
    expressFormatter(row, _column, cellValue) {
      // 实体
      return formatterValueByOptions({
        cellValue,
        condition: cellValue && row.prizeType === 'MATERIAL_OBJECT',
        options: expressOptions
      })
    },
    prizeTypeFormatter(_row, _column, cellValue) {
      return formatterValueByDict({
        cellValue,
        options: this.prizeTypeOptions
      })
    },
    quantityFormatter(_row, _column, cellValue) {
      if (cellValue) {
        return `X ${cellValue}`
      }
      return ''
    },
    // 初始查询列表
    searchList() {
      this.loading = true
      const params = Object.assign(this.formInline, this.searchParams)
      getOrders(
        params,
        (response) => {
          this.tableData = response.rows
          this.total = response.total
          this.loading = false
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 发货
    deliverGoods(row) {
      // 发货实物的时候可以输入快递公司和快递单号
      let params = {}
      // 判断是实物还是虚拟
      if (row.prizeType === 'FICTITIOUS') {
        if (row.hasCardInfo) {
          this.setupPasswordDialogData = { isShow: true, id: row.id }
        } else {
          this.$confirm('是否该虚拟物品进行了发放？', '确认', {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(() => {
            this.deliverGoodsAction(row.id, params, '发放成功！')
          })
        }
      } else if (row.prizeType === 'MATERIAL_OBJECT') {
        this.$refs.deliverGoodsDialog.show(row)
      } else {
        return
      }
    },
    deliverGoodsConfirm(row, form) {
      const params = {
        expressCompany: form.expressCompany,
        expressNumber: form.expressNumber
      }
      this.$confirm('是否该实物物品进行了发货？', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.deliverGoodsAction(row.id, params, '发货成功！')
      })
    },
    deliverGoodsAction(id, params, confirmSuccessInfo) {
      patchOrdersById(
        id,
        params,
        (response) => {
          this.searchList()
          this.$message({
            type: 'success',
            message: confirmSuccessInfo
          })
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 导入
    importBtn() {
      this.importDialogData.url = importOrders() // 导入接口
      this.importDialogData.downUrl = exportOrders() // 下载模板接口
      this.importDialogData.isShow = true // 显示导入弹框
    },
    // 批量导入京东E卡
    importJDcard() {
      this.importDialogData.title = '批量导入京东E卡'
      this.importDialogData.url = importJDcards() // 导入接口
      this.importDialogData.downUrl = importJDcardsTemplate() // 下载模板接口
      this.importDialogData.params = 'JD'
      this.importDialogData.isShow = true // 显示导入弹框
    },
    // 批量导入JDE卡成功弹窗
    uploadSuccess(val) {
      this.importSuccessDialogData = {
        isShow: true,
        successText: val,
        failDataUrl: downloadFailData
      }
    },
    /* 导入失败弹窗 */
    showError(text) {
      this.errorDialogData.isShow = true // 显示导入失败弹框
      this.errorDialogData.warningText = text // 显示导入失败弹框
    },
    // 导出
    exportFile() {
      this.$confirm('确定导出合伙人订单列表吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let obj = Object.assign({}, this.formInline)
          delete obj.createTime
          let url = exportOrders()
          this.downFile('get', url, obj, '合伙人订单列表导出')
        })
        .catch(() => {})
    },
    // 查看
    toView(row) {
      const { prizeType, hasCardInfo } = row
      let content = { message: '', title: '' }
      if (prizeType === 'MATERIAL_OBJECT') {
        const { expressCompany, expressNumber, address } = row
        content.message = `<p>快递公司：${expressCompany || '空'}</p>
          <p>快递单号：${expressNumber || '空'}</p>
          <p>地址：${address || '空'}</p>`
        content.title = '查看实体信息'
      } else if (hasCardInfo) {
        const { cardNumber, password, validityTime } = row
        content.message = `<p>卡号：${cardNumber || '空'}</p>
          <p>密码：${password || '空'}</p>
          <p>有效日期：${validityTime ? `截止到 ${validityTime}` : '空'}</p>`
        content.title = '查看卡密信息'
      }
      this.$alert(content.message, content.title, {
        dangerouslyUseHTMLString: true,
        showConfirmButton: false,
        customClass: 'message-content'
      })
        .then(() => {})
        .catch(() => {})
    }
  },
  computed: {
    isShowToView() {
      return function(row) {
        if (row.prizeType === 'MATERIAL_OBJECT') return true
        else if (row.hasCardInfo && row.status === '1') return true
        else return false
      }
    }
  }
}
</script>
<style lang="less">
.message-content {
  .el-message-box__title {
    text-align: center;
  }
}
</style>
